<template>
  <div class="solutions_wrapper">
    <div class="fourth_content">
      <div class="kicker_wrapper">
        <img
          src=""
          alt="shapes icon" class="kicker_icon" />
        <div class="kicker_text" v-html="$t('fourthContentCalloutMenu')"></div>
      </div>
      <h2 class="callout_title">{{ $t("fourthContentCalloutTitle") }}</h2>
      <p class="callout_body">
        {{ $t("fourthContentCalloutBody") }}
      </p>
      <div class="blockbox">
        <div class="card_container">
          <div class="outline_card" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
            @mouseleave="mouseEnterHandle">
            <div class="solution_card">
              <div class="image-wrapper">
                <img aria-hidden="true" data-placeholder-image="" decoding="async" src="/src/assets/Nav_Icon-8.webp"
                  alt="" />
              </div>
              <div class="solution_title">{{ $t("fourthContentSolutionTitle") }}</div>
              <p class="solution_text">
                {{ $t("fourthContentSolutionText") }}
              </p>
            </div>
          </div>
          <div class="outline_card" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
            @mouseleave="mouseEnterHandle">
            <div class="solution_card">
              <div class="image-wrapper">
                <img aria-hidden="true" data-placeholder-image="" decoding="async" src="/src/assets/Nav_Icon-8.webp"
                  alt="" />
              </div>
              <div class="solution_title">{{ $t("fourthContentSolutionTitle2") }}</div>
              <p class="solution_text">
                {{ $t("fourthContentSolutionText2") }}
              </p>
            </div>
          </div>
          <div class="outline_card" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
            @mouseleave="mouseEnterHandle">
            <div class="solution_card">
              <div class="image-wrapper">
                <img aria-hidden="true" data-placeholder-image="" decoding="async" src="/src/assets/Nav_Icon-8.webp"
                  alt="" />
              </div>
              <div class="solution_title">{{ $t("fourthContentSolutionTitle3") }}</div>
              <p class="solution_text">
                {{ $t("fourthContentSolutionText3") }}
              </p>
            </div>
          </div>
          <div class="outline_card" style="--progress: 100%" @mouseenter="mouseLeaveHandle"
            @mouseleave="mouseEnterHandle">
            <div class="solution_card">
              <div class="image-wrapper">
                <img aria-hidden="true" data-placeholder-image="" decoding="async" src="/src/assets/Nav_Icon-8.webp"
                  alt="" />
              </div>
              <div class="solution_title">{{ $t("fourthContentSolutionTitle4") }}</div>
              <p class="solution_text">
                {{ $t("fourthContentSolutionText4") }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { mouseEnterHandle, mouseLeaveHandle } from '@/utils/mouse.js'
// import { onMounted, ref } from 'vue'
// let blockHeight = ref(0);
// onMounted(() => {
//   setTimeout(() => {
//     if (document.body.offsetWidth > 500) {
//       document.querySelectorAll('.outline_card').forEach(item => {
//         blockHeight.value = blockHeight.value < item.offsetHeight ? item.offsetHeight : blockHeight.value;
//       })
//       document.querySelectorAll('.outline_card').forEach(item => {
//         item.style['height'] = `${blockHeight.value}px`;
//       })
//     }
//   }, 500)
// })
// window.onresize = function () {
//   document.querySelectorAll('.outline_card').forEach(item => {
//     item.style['height'] = `auto`;
//   })
//   blockHeight.value = 0;
//   setTimeout(() => {
//     if (document.body.offsetWidth > 500) {
//       document.querySelectorAll('.outline_card').forEach(item => {
//         blockHeight.value = blockHeight.value < item.offsetHeight ? item.offsetHeight : blockHeight.value;
//       })
//       document.querySelectorAll('.outline_card').forEach(item => {
//         item.style['height'] = `${blockHeight.value}px`;
//       })
//     }
//   }, 10)
// };
</script>

<style lang="less" scoped>
.solutions_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 9.444vw 7.778vw 15.903vw;
  background: rgb(0, 32, 37);
  position: relative;
  z-index: 2;

  .fourth_content {
    margin: 0px auto;
    width: 1214px;
    display: flex;
    flex-direction: column;
    gap: 30px;

    @media screen and (min-width: 1025px) {
      width: 84.3vw;
      gap: 2.08vw;
    }

    .kicker_wrapper {
      display: flex;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center;
      gap: 1.042vw;
      color: rgb(183, 198, 201);

      .kicker_icon {
        max-block-size: 100%;
        max-inline-size: 100%;
      }

      .kicker_text {
        font-family: Gellix;
        font-weight: 300;
        font-size: 12px;
        letter-spacing: 0.35em;
        line-height: 105%;
        text-transform: uppercase;
        color: rgb(84, 105, 108);

        @media screen and (min-width: 1025px) {
          font-size: 0.83vw;
        }
      }
    }

    .callout_title {
      font-family: Gellix;
      font-weight: 500;
      font-size: 120px;
      letter-spacing: -0.04em;
      line-height: 100%;
      color: rgb(255, 255, 250);
      width: 38.333vw;

      @media screen and (min-width: 1441px) {
        font-size: 120px;
      }

      @media screen and (min-width: 1025px) and (max-width: 1440px) {
        font-size: 8vw;
      }

      @media screen and (min-width: 501px) and (max-width: 1024px) {
        font-size: 8vw;
      }

      @media screen and (max-width: 500px) {
        font-size: 8vw;
      }
    }

    .callout_body {
      font-family: Gellix;
      font-weight: 400;
      font-size: 22px;
      letter-spacing: 0px;
      line-height: 130%;
      color: rgb(255, 255, 250);
      width: 38.33vw;

      @media screen and (min-width: 1025px) {
        font-size: 1.52vw;
      }

      @media screen and (min-width: 501px) and (max-width: 1024px) {
        width: 52.906vw;
        font-size: 2.148vw;
      }

      @media screen and (max-width: 500px) {
        width: 89.6vw;
        font-size: 5.867vw;
      }
    }

    .card_container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      flex-flow: wrap;
      gap: 1.667vw;
      margin-top: 5.208vw;
      width: 84.444vw;

      .outline_card {
        position: relative;
        background: rgb(5, 51, 58);
        height: 100%;
        width: 29.93vw;
        height: max-content;
        border-radius: 2.083vw;
        padding: 40px 19px;
        z-index: 1;
        border: none;
        cursor: pointer;
        transition:
          color 0.2s ease-in-out 0s,
          background-color 0.3s ease-in-out 0s;
        --progress: 100%;
        // @media screen and (min-width: 1441px) {
        //   min-height: 365px;
        // }

        // @media screen and (min-width: 1025px) and (max-width: 1440px) {
        //   min-height: 255px;
        // }

        // @media screen and (min-width: 701px) and (max-width: 1024px) {
        //   min-height: 365px;
        // }
        // @media screen and (min-width: 501px) and (max-width: 700px) {
        //   min-height: 445px;
        // }

        // @media screen and (max-width: 500px) {
        //   min-height: 385.98px;
        // }

        // @media screen and (min-width: 501px) and (max-width: 1024px) {
        //   width: 43.93vw;;
        // }

        // @media screen and (min-width: 1025px) {
        //   width: 19.861vw;
        //   border-radius: 2.083vw;
        //   padding: 2.778vw 1.319vw;
        // }
        @media screen and (min-width: 501px) and (max-width: 1024px) {
          width: 27.93vw;
          border-radius: 2.93vw;
          padding: 3.906vw 1.855vw 1.953vw;
        }
        @media screen and (min-width: 1025px) and (max-width: 1440px) {
        width: 19.861vw;
        border-radius: 2.083vw;
        padding: 2.778vw 1.319vw;
        }
        @media screen and (max-width: 500px) {
          width: 85%;
          border-radius: 2.083vw;
          padding: 2.778vw 1.319vw;
        }
        .solution_card {
          display: flex;
          flex-direction: column;
          -webkit-box-align: center;
          align-items: center;
          gap: 25px;

          @media screen and (min-width: 1025px) {
            gap: 1.736vw;
          }

          .image-wrapper {
            display: inline-block;
            vertical-align: top;
            position: relative;
            overflow: hidden;
            width: 100px;
            height: 100px;

            @media screen and (min-width: 1025px) {
              width: 6.944vw;
              height: 6.944vw;
            }

            img {
              bottom: 0;
              height: 100%;
              left: 0;
              margin: 0;
              max-width: none;
              padding: 0;
              position: absolute;
              right: 0;
              top: 0;
              width: 100%;
              object-fit: cover;
            }
          }

          .solution_title {
            font-family: Gellix;
            font-weight: 500;
            font-size: 20px;
            letter-spacing: -0.02em;
            line-height: 120%;
            color: rgb(255, 255, 250);
            text-align: center;

            @media screen and (min-width: 1025px) {
              font-size: 1.806vw;
            }

            @media screen and (max-width: 500px) {
              font-size: 5.333vw;
            }
          }

          .solution_text {
            font-family: Gellix;
            font-weight: 400;
            font-size: 16px;
            letter-spacing: 0px;
            line-height: 130%;
            color: rgb(183, 198, 201);
            text-align: center;

            @media screen and (min-width: 1025px) {
              font-size: 1.111vw;
            }

            @media screen and (max-width: 500px) {
              font-size: 3.2vw;
            }
          }
        }
      }

      .outline_card::after {
        .afterBorder();
        border-radius: 2.083vw;
        transition: all 0.5s;

        @media screen and (min-width: 1025px) {
          border-radius: 2.083vw;
        }
      }
    }
  }
}

// @media screen and (max-width: 500px) {
//   .solutions_wrapper {
//     padding: 20px;

//     .fourth_content {
//       width: 100%;

//       .callout_title {
//         font-size: 12.8vw;
//         width: 58.667vw;
//       }

//       .callout_body {
//         width: 89.6vw;
//         font-size: 5.867vw;
//         margin-bottom: 2.667vw;
//       }

//       .card_container {
//         width: max-content;
//         display: flex;
//         flex-direction: row;
//         align-items: flex-start;
//         justify-content: center;

//         .outline_card {
//           min-width: 0px;
//           width: 85%;
//           height: max-content !important;
//           margin-bottom: 10px;
//         }
//       }
//     }
//   }
// }

// @media screen and (min-width: 646px) and (max-width: 1024px) {
//   .solutions_wrapper {
//     padding: 20px;

//     .fourth_content {
//       width: 100%;

//       .callout_title {
//         font-size: 42px;
//         width: 100%;
//       }

//       .callout_body {
//         width: 100%;
//       }

//       .card_container {
//         width: max-content;
//         display: flex;
//         flex-direction: row;
//         align-items: flex-start;
//         justify-content: space-between;
//       }
//     }
//   }
// }

// @media screen and (min-width: 501px) and (max-width: 645px) {
//   .solutions_wrapper {
//     padding: 20px;

//     .fourth_content {
//       width: 100%;

//       .callout_title {
//         font-size: 42px;
//         width: 100%;
//       }

//       .callout_body {
//         width: 100%;
//       }

//       .card_container {
//         width: max-content;
//         display: flex;
//         flex-direction: row;
//         align-items: flex-start;
//         justify-content: space-between;
//       }
//     }
//   }
// }

.blockbox {
  display: flex;
  flex-direction: row;
  height: max-content;
  justify-content: center;
  align-items: center;

}
</style>
